<template>
  <div class="g-bd">
    <div class="n-mylv">
      <div class="n-lv">
        <div class="h3">
          当前等级：
          <span class="n-level-big">
            <i></i>
            {{ level.level }}
          </span>
          <div class="n-level-tips">等级数据每天下午2点更新</div>
        </div>
        <div class="sub">
          <div class="subbg">
            <div :style="`width: ${length}px;`">
              <span></span>
            </div>
          </div>
          <div class="subnum">
            <div class="divison">
              <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
            <div class="divnum">
              <ul>
                <li :class="[level.level>0?'z-ov':'',level.level==0?'z-on':'']">0</li>
                <li :class="[level.level>1?'z-ov':'',level.level==1?'z-on':'']">1</li>
                <li :class="[level.level>2?'z-ov':'',level.level==2?'z-on':'']">2</li>
                <li :class="[level.level>3?'z-ov':'',level.level==3?'z-on':'']">3</li>
                <li :class="[level.level>4?'z-ov':'',level.level==4?'z-on':'']">4</li>
                <li :class="[level.level>5?'z-ov':'',level.level==5?'z-on':'']">5</li>
                <li :class="[level.level>6?'z-ov':'',level.level==6?'z-on':'']">6</li>
                <li :class="[level.level>7?'z-ov':'',level.level==7?'z-on':'']">7</li>
                <li :class="[level.level>8?'z-ov':'',level.level==8?'z-on':'']">8</li>
                <li :class="[level.level>9?'z-ov':'',level.level==9?'z-on':'']">9</li>
                <li :class="[level.level>10?'z-ov':'',level.level==10?'z-on':'']">10</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="n-pow">
        <div class="h3">当前等级特权：</div>
        <div class="telist">
          <ul class="j-flag">
            <li v-for="(infos,i) in info" :key="i">{{infos}}</li>
          </ul>
        </div>
        <div class="aboutmore">
          <router-link :to="{name:'LevelDetails'}">了解等级特权></router-link>
        </div>
      </div>
      <div class="n-nextlv">
        <div class="h4">
          距离下一个等级：
          <span class="n-level">
            <i></i>
              {{level.level+1}}
           </span>
          <span class="n-iconpoint">
              <a href="javascript:void(0)" class="u-icn2-5"></a>
            <div class="tipss">
              <p>听歌量是指累计播放的歌曲数量而非播放次数，并且实际播放时间过短的歌曲将不纳入计算，每天最多计算300首。</p>
              <p>登录天数是指使用云音乐的天数，在多端同时使用不会被重复计算。</p>
              <i class="t"></i>
              <i class="b"></i>
            </div>
          </span>
        </div>
        <div class="uitl">
          <span class="tit">听歌：</span>
          <div class="bar">
            <div class="barbox">
              <span :style="`width: ${(level.nowPlayCount/level.nextPlayCount)*100}%;`"></span>
            </div>
          </div>
          还需听歌{{level.nextPlayCount-level.nowPlayCount}}首
        </div>
        <div class="uitl">
          <span class="tit">登录：</span>
          <div class="bar">
            <div class="barbox">
              <span :style="`width: ${(level.nowLoginCount/level.nextLoginCount)*100}%;`"></span>
            </div>
          </div>
          还需登录{{level.nextLoginCount-level.nowLoginCount}}天
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      showTip: false,
      level: {},
      length: '',
      info:[]
    }
  },
  methods: {
    async Level() {
      const result = await this.$API.reqUserLevel(this.$store.state.track.user.cookies);
      console.log(result)
      if (result.data.code == 200) {
        this.level = result.data.data
        this.length = (result.data.data.level + 1) * result.data.data.progress * (81) + 30
        this.info = result.data.data.info.split('$')
      } else {
        return new Promise(reject => {
          reject('fail')
        })
      }
    },
  },
  mounted() {
    this.Level()
  }
}
</script>

<style scoped lang="less">
.g-bd {
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .n-mylv {
    padding: 70px 68px;

    .n-lv {
      margin-bottom: 52px;

      .h3 {
        position: relative;
        z-index: 1;
        zoom: 1;
        height: 32px;
        line-height: 32px;
        color: #333;
        font-size: 22px;
        margin-bottom: 4px;
        font-family: 'Microsoft YaHei';

        .n-level-big {
          position: relative;
          z-index: 1;
          zoom: 1;
          height: 32px;
          line-height: 32px;
          margin-left: 30px;
          zoom: 1;
          font-family: Arial;
          font-size: 24px;
          font-weight: 700;
          color: #e03a24;
          font-style: italic;

          i {
            position: absolute;
            left: -30px;
            top: 0;
            z-index: 1;
            width: 30px;
            height: 30px;
            background-position: left 5px;
            background-image: url("../../assets/mylevel.png");
          }
        }

        .n-level-tips {
          position: absolute;
          z-index: 1;
          left: 0;
          top: 101px;
          font-size: 12px;
          color: #999;
          font-family: Arial, Helvetica, sans-serif;
        }
      }

      .sub {
        width: 100%;
        position: relative;
        z-index: 1;
        padding-top: 31px;
        height: 34px;
        overflow: hidden;

        .subbg {
          width: 835px;
          height: 10px;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 2;
          border-radius: 10px;
          background: #dcdfe6;

          div {
            span {
              background: url(../../assets/mylevelbar.png) 0 0 repeat-y;
              width: 100%;
              height: 10px;
              display: block;
              border-radius: 10px;
              -webkit-animation: subbar 2s;
              animation: subbar 2s;
            }
          }
        }

        .subnum {
          width: 100%;
          height: 40px;
          left: 0;
          bottom: 0;
          position: absolute;
          z-index: 2;

          .divison {
            position: absolute;
            left: 13px;
            bottom: 0;
            width: 100%;
            height: 10px;

            span {
              float: left;
              display: inline;
              width: 1px;
              background: #fff;
              height: 10px;
              margin-left: 80px;
            }
          }

          .divnum {
            position: absolute;
            left: 0;
            top: 0;
            font-family: 'Microsoft YaHei';
            font-size: 18px;
            color: #c4c6cc;
            width: 980px;

            ul {
              li {
                float: left;
                width: 25px;
                height: 28px;
                line-height: 24px;
                display: inline;
                margin-right: 56px;
                text-align: center;
              }

              .z-ov {
                color: #ed5757;
                -webkit-animation: show 3s;
                animation: show 3s;
              }

              .z-on {
                color: #fff;
                background-position: 0 -50px;
                -webkit-animation: show1 2s;
                animation: show1 2s;
                background-image: url("../../assets/mylevel.png");
              }
            }
          }
        }
      }
    }

    .n-pow {
      border-bottom: solid 1px #ddd;
      margin-bottom: 36px;

      .h3 {
        position: relative;
        z-index: 1;
        zoom: 1;
        height: 32px;
        line-height: 32px;
        color: #333;
        font-size: 22px;
        margin-bottom: 4px;
        font-family: 'Microsoft YaHei';
      }

      .telist {
        padding-bottom: 10px;

        .j-flag {
          li {
            height: 30px;
            line-height: 30px;
            color: #666;
            padding-left: 13px;
            background-position: -17px -82px;
            font-size: 14px;
            background-repeat: no-repeat;
            background-image: url("../../assets/mylevel.png");
          }
        }
      }

      .aboutmore {
        color: #0e73ba;
        margin-top: 28px;
        padding-left: 4px;
        margin-bottom: 26px;
        height: 20px;
        line-height: 20px;

        a {
          color: #0e73ba;
        }
      }
    }

    .n-nextlv {
      .h4 {
        height: 22px;
        line-height: 22px;
        font-size: 14px;
        color: #333;
        margin-bottom: 20px;

        .n-level {
          position: relative;
          margin-left: 25px;
          zoom: 1;
          font-family: Arial;
          font-size: 18px;
          font-weight: 700;
          color: #e03a24;
          font-style: italic;

          i {
            position: absolute;
            left: -25px;
            top: 0;
            width: 25px;
            height: 22px;
            background-position: 0 -25px;
            background-image: url("../../assets/mylevel.png");

          }
        }

        .n-iconpoint {
          position: relative;
          margin-left: 10px;
          left: -5px;
          top: -2px;
          z-index: 2;

          .u-icn2-5 {
            width: 18px;
            height: 18px;
            background-position: 0 -50px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../assets/icon2.png");

          }

          .tipss {
            display: none;
            position: absolute;
            left: -33px;
            top: 30px;
            width: 295px;
            font-size: 12px;
            line-height: 20px;
            background: url(../../assets/top_m.png) 0 0 repeat-y;
            padding: 8px 19px 7px 19px;
            z-index: 2;
            color: #666;

            .t {
              position: absolute;
              width: 327px;
              height: 16px;
              background: url(../../assets/top_t.png) 0 0 no-repeat;
              left: 0;
              top: -16px;
            }

            .b {
              position: absolute;
              width: 327px;
              height: 12px;
              background: url(../../assets/top_b.png) 0 0 no-repeat;
              left: 0;
              bottom: -12px;
            }
          }
        }
      }

      .uitl {
        font-size: 12px;
        color: #999;
        height: 32px;
        line-height: 32px;

        .tit {
          line-height: 32px;
          color: #666;
        }

        .bar {
          display: inline-block;
          width: 160px;
          height: 12px;
          margin-right: 6px;
          position: relative;
          *display: inline;
          zoom: 1;

          .barbox {
            position: absolute;
            top: 7px;
            left: 0;
            z-index: 1;
            width: 160px;
            height: 4px;
            line-height: 0;
            background: #dcdfe6;
            border-radius: 4px;

            span {
              width: 100%;
              height: 100%;
              background: #f75757;
              border-radius: 4px;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>